<template>
    <div>
        <div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
    </div>
</template>

<script>
    import echartMixins from "@/utils/resizeMixins";

    export default {

        props: {
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {

            return {
                chart: null
            };
        },
        watch: {
            chartData: {
                deep: true,
                handler() {
                    console.log("获得的地址数据---" + JSON.stringify(this.chartData));
                    this.draw();
                }
            }
        },

        mixins: [echartMixins],
        mounted() {
            this.draw();
        },
        methods: {
            draw() {
                // 基于准备好的dom，初始化echarts实例
                this.chart = this.$echarts.init(document.getElementById("bottomLeftChart"));

                let option = {
                    title: {
                        text: "",

                        textStyle: {
                            color: "#B4B4B4",
                            fontSize: 16,
                            fontWeight: "normal"
                        }
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        textStyle: {
                            color: "#B4B4B4"
                        },
                        top: "0%"
                    },
                    grid: {
                        x: "8%",
                        width: "90%",
                        y: "4%"
                    },
                    xAxis: {
                        type: 'category',
                        data: this.chartData.xaxis,
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        }
                    },
                    yAxis: [
                        {
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    width: 0.5,
                                    type: 'dashed'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },

                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                    ],

                    series: [
                        {
                            name: "订单数量",
                            type: "bar",
                            barWidth: 10,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {offset: 0, color: "#956FD4"},
                                        {offset: 1, color: "#3EACE5"}
                                    ])
                                }
                            },
                            data: this.chartData.yaxis
                        }

                    ]
                };
                this.chart.setOption(option);
            }
        },
        destroyed() {
            window.onresize = null;
        }
    };
</script>

<style lang="scss" scoped>
</style>